<template>
  <div class="stall-coupon">

    <!--S顶部-->
    <roof
      :show-left-capsule="true"
      title="商家卡券">
    </roof>
    <!--E顶部-->

    <!--S顶部导航-->
    <div id="nav" :style="{top:systemInfo.statusBarHeight + capsule_height+'px'}">
      <div class="nav-list">
        <div class="nav-item">全部</div>
      </div>
    </div>
    <!--E顶部导航-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">
      111
    </div>
    <!--E内容-->


    <!--S上拉菜单-->
    <action-sheet
      :options="action_sheet.data"
      :show="action_sheet.show"
      @cancel="action_sheet.show = false"
    ></action-sheet>
    <!--E上拉菜单-->

  </div>
</template>

<script>
  import store from '../../store/index'
  import roof from '../../components/roof/Roof'
  import { select } from '../../utils/index'
  import actionSheet from '../../components/action-sheet/ActionSheet'
  export default{
    data () {
      return {
        // 顶部填充区域高度
        content_padding_top: 0,
        // 胶囊高度
        capsule_height: 0,
        // 商家id
        stall_id: 0,
        // 上拉菜单
        action_sheet: {
          data: [
            {
              text: '创建相册',
              value: 'create-photo'
            },
            {
              text: '上传照片',
              value: 'upload-photo'
            },
            {
              text: '编辑',
              value: 'edit'
            }
          ],
          show: false
        },
        // navs
        navs: [
          {
            name: '全部',
            value: 'all'
          },
          {
            name: '套餐券',
            value: 'tc'
          },
          {
            name: '代金券',
            value: 'dj'
          },
          {
            name: '兑换券',
            value: 'dh'
          },
          {
            name: '折扣券',
            value: 'zk'
          }
        ]
      }
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    components: {
      roof,
      'action-sheet': actionSheet
    },
    onLoad (options) {
      this.stall_id = options.stall_id
    },
    mounted () {
      this.setCapsuleHeight()
      this.setContentPaddingTop()
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        select('#nav')
          .then((res) => {
            this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height + res[0].height
          })
      }
    }
  }
</script>
<style scoped lang="less" src="./index.less"></style>
